<template>
  <div class="container">
    <div class="head">
      <div class="img">
        <img src="../../assets/NJUST.jpeg" />
      </div>
      <div class="person">
        <img src="../../assets/用户名.png" />
  <li class="li1"><router-link to="/person"><span>个人主页</span></router-link></li>
  </div>
  <div class="list">
    <img src="../../assets/购物车.png" />
  <li class="li1"><router-link to="/sample"><span>我的清单</span></router-link></li>
  </div>
  </div>

  <div class="crumbs">
    <nav>
      <router-link to="/home1"><span>首页</span><span>/</span></router-link>
               <router-link to="/home1"><span>{{ staName}}</span><span>/</span></router-link>
               <router-link :to="{
                 name: 'Home2', 
                 params: {
          param:this.staId,
          param1: this.staName,
               }
              }"><span>{{ pjName}}</span><span>/</span></router-link>
               <router-link :to="{
                 name: 'module', 
                 params: {
          staName: this.staName,
          pjName: this.pjName,
          pjId: this.pjId,
          staId:this.staId
               }
              }"><span>人员-考核</span></router-link>
      <!-- <router-link to="/home1"><span>首页 </span></router-link><span>/</span>
      <router-link to="/home2"><span>xxxx标准 </span></router-link><span>/</span>
      <router-link to="module"><span>xxxx项目</span></router-link><span>/</span>
      <router-link to="#"><span>人员-考核</span></router-link> -->
    </nav>
    
  </div>

  <div class="main-content">
    <!-- <h1>医用防护口罩·呼吸阻力</h1> -->
    <div class="nav">
      <router-link :to="{
        name: 'Training',
        params: {
          staName: this.staName,
          pjName: this.pjName,
          pjId: this.pjId,
          staId: this.staId
        }
      }" class="active">培训</router-link> |
      <a href="#" class="exam">考核</a>
    </div>

    <div class="exam-section">
      <div class="exam-download">
        <h2>试卷下载：</h2>
        <div class="pdf-download">
          <img src="../../assets/Pdf.png" alt="PDF下载" />
          <a href="#" class="download-link" @click="downloadpaper">{{ staName}}·{{ pjName}}（点击下载）</a>
        </div>
      </div>

      <div class="upload-section">

        <div class="upload-exam">
          <h2>上传试卷：</h2>
          <div class="upload-button" @click="triggerPdfUpload" @drop.prevent="handlePdfUpload" @dragover.prevent>
            <div class="upload-icon" v-if="!isPdfUploaded">
              <i class="el-icon-document"></i>
            </div>
            <div class="upload-icon" v-if="isPdfUploaded">
              <i class="el-icon-check"></i> <!-- 成功图标 -->
            </div>
            <p v-if="!isPdfUploaded">点击PDF文件到这里上传</p>
            <p v-if="isPdfUploaded">已成功上传</p>
            <input type="file" @change="handlePdfUpload" accept="pdf/*" ref="pdfInput" style="display: none">
          </div>
        </div>

        <div class="upload-video">
          <h2>上传视频：</h2>
          <div 
            class="upload-button" 
            @click="triggerVideoUpload" 
            @drop.prevent="handleVideoUpload" 
            @dragover.prevent
            :class="{ 'is-uploading': isUploading }"
          >
            <div class="upload-icon" v-if="!isVideoUploaded && !isUploading">
              <i class="el-icon-video-camera"></i>
            </div>
            <div class="upload-icon" v-if="isVideoUploaded && !isUploading">
              <i class="el-icon-check"></i>
            </div>
            <div class="upload-icon" v-if="isUploading">
              <i class="el-icon-loading"></i>
            </div>
            <p v-if="!isVideoUploaded && !isUploading">点击或拖拽视频文件到这里上传</p>
            <p v-if="isVideoUploaded && !isUploading">已选择: {{ video.name }}</p>
            <p v-if="isUploading">上传中...</p>
            <input 
              type="file" 
              @change="handleVideoUpload" 
              accept="video/*"
              ref="videoInput" 
              style="display: none"
            >
          </div>
          <div class="upload-tip">支持 mp4, mpeg, avi, mov 格式，大小不超过500MB</div>
        </div>


        <el-button type="primary" @click="submitAllUploads" class="sub">提交</el-button>

      </div>
    </div>


  </div>

  <div class="chatbot">
    <img src="../../assets/客服.png" />
    <span class="chatbot-text">未找到所需内容？</span>
    <a href="#" class="chatbot-link" @click="toggleChatbot">点我留言</a>
  </div>

  <!-- 遮罩层 -->
  <div v-if="isChatbotVisible" class="chatbot-mask"></div>

  <!-- 弹出框 -->
  <div v-if="isChatbotVisible" class="chatbot-popup">
    <h2>留言板</h2>
    <textarea v-model="message" rows="4" cols="50" placeholder="请输入您的留言..."></textarea>
    <div class="popup-actions">
      <el-button type="primary" @click="submitMessage">提交留言</el-button>
      <el-button @click="toggleChatbot">关闭</el-button>
    </div>
  </div>
  </div>
</template>

<script>import axios from 'axios';

export default {
  name: 'ExamPage',
  data() {
    return {
      isChatbotVisible: false, // 控制弹出框显示
      message: '', // 绑定留言内容
      fileUrl: '',
      PaperId: '',
      staName:'',
      pjName:'',
      pjId:'',
      staId:'',
      sId:'',
      paper: null, // 用于存储选择的PDF文件
      video: null,
      isPdfUploaded: false,
      isVideoUploaded: false,
      isUploading: false, // 添加上传状态标识
    };
  },
  created() {
    this.staName=this.$route.params.staName;
      this.pjName=this.$route.params.pjName;
      this.pjId=this.$route.params.pjId;
      this.staId=this.$route.params.staId;
      this.sId = this.$route.params.sId;
    console.log(this.sId);
    this.$http.get(`/findPaper/${this.pjId}`).then((response) => {
      this.PaperId = response.data;
      console.log(response.data);
    });
  },
  methods: {
    submitAllUploads() {
      if (!this.paper && !this.video) {
        this.$message.error('请先上传试卷和视频！');
        return;
      }

      if (!this.paper) {
        this.$message.error('请上传试卷！');
        return;
      }

      if (!this.video) {
        this.$message.error('请上传视频！');
        return;
      }

      // 开始上传
      this.isUploading = true;
      let formData = new FormData();
      formData.append('file', this.video);
      formData.append('sId', this.sId);

      // 先上传视频
      this.$http.post('/uploadVideo', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 视频上传成功后上传PDF
        let pdfData = new FormData();
        pdfData.append('file', this.paper);
        pdfData.append('sId', this.sId);
        
        return this.$http.post('/uploadPdf', pdfData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
      }).then(() => {
        // 两个文件都上传成功
        this.$message.success('提交成功！');
        this.resetUploadStatus();
      }).catch(error => {
        console.error('上传失败:', error);
        this.$message.error('上传失败，请重试');
      }).finally(() => {
        this.isUploading = false;
      });
    },

    resetUploadStatus() {
      this.paper = null;
      this.video = null;
      this.isPdfUploaded = false;
      this.isVideoUploaded = false;
      this.isUploading = false;
    },

    downloadpaper() {
      this.$http.get("/downloadPaper", { params: { pgId: this.PaperId, sId: this.sId} }).then((response) => {
        this.fileUrl = response.data;
        fetch(this.fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const blobUrl = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = blobUrl;
          link.download = 'certificate.pdf';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(blobUrl);
        }).catch(e => console.error('Error downloading the PDF:', e));
      });
    },
    handlePdfUpload(event) {
      const file = event.target.files[0];
      if (file && file.type === 'application/pdf') {
        this.paper = file;
        this.isPdfUploaded = true;
      } else {
        this.$message.error('只能上传PDF格式的文件！');
        this.isPdfUploaded = false;
      }
    },
    handleVideoUpload(event) {
      const file = event.target.files[0];
      const videoTypes = ['video/mp4', 'video/mpeg', 'video/avi', 'video/quicktime'];
      const maxSize = 500 * 1024 * 1024; // 500MB

      if (!file) {
        return;
      }

      if (!videoTypes.includes(file.type)) {
        this.$message.error('请上传正确的视频格式（mp4, mpeg, avi, mov）');
        this.isVideoUploaded = false;
        return;
      }

      if (file.size > maxSize) {
        this.$message.error('视频大小不能超过500MB');
        this.isVideoUploaded = false;
        return;
      }

      this.video = file;
      this.isVideoUploaded = true;
      this.$message.success('视频文件已选择');
    },
    toggleChatbot() {
      this.isChatbotVisible = !this.isChatbotVisible; // 切换弹出框显示状态
    },
    submitMessage() {
      // 提交留言的逻辑
      console.log('留言内容:', this.message);
      // 可以在这里添加代码将留言发送到服务器
      this.$http.put(`/insertFeedback/${this.message}`).then((response)=>{
          
      }),
      this.isChatbotVisible = false; // 提交后隐藏弹出框
      this.message = ''; // 清空留言内容

      // 添加弹窗提示留言成功的逻辑
      this.$alert('留言成功！', '成功', {
        confirmButtonText: '确定',
        type: 'success'
      });
    },
    triggerPdfUpload() {
      this.$refs.pdfInput.click();
    },
    triggerVideoUpload() {
      this.$refs.videoInput.click();
    }
  }
}</script>

<style scoped>
  /* 样式定义 */
  .container {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }

  .head {
    width: 100%;
    background-color: #abe0f3;
    height: 6vh;
  }

    .head .img {
      height: 100%;
      float: left;
    }

      .head .img img {
        height: 100%;
      }

    .head .list {
      float: right;
      height: 45%;
    }

      .head .list img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .list li {
        margin-top: 20px;
        margin-right: 40px;
        display: block;
        float: left;
        font-size: 18px;
      }

    .head .person {
      float: right;
      height: 42%;
    }

      .head .person img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .person li {
        margin-top: 20px;
        margin-right: 70px;
        display: block;
        float: left;
        font-size: 18px;
      }


  .nav a {
    margin-left: 10px;
    text-decoration: none;
    color: #000;
    padding: 5px 10px; /* 添加内边距 */
    border-radius: 5px; /* 添加圆角 */
  }

    .nav a.active {
      background-color: transparent; /* 培训无底色 */
      color: #000;
    }

    .nav a.exam {
      background-color: #555; /* 考核有底色 */
      color: #fff;
    }

  .crumbs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f0f0f0;
  }

  .main-content {
    padding: 20px;
    /*text-align: center;*/ /* 使内容居中 */
  }

  h1 {
    float: left;
  }

  .nav {
    float: right;
  }

  .exam-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 13vh;
  }

  .exam-download, .upload-section {
    margin-bottom: 20px;
  }

  .pdf-download, .upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 10px;
    text-align: center;
  }

    .pdf-download p {
      margin: 10px 0; /* 添加上下边距 */
    }



    .download-link:hover,
    .download-link:focus,
    .download-link:active {
      color: black; /* 悬停、聚焦、点击时颜色不变 */
      text-decoration: underline; /* 保持下划线 */
    }

  .pdf-download img, .upload-box img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  .upload-section {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: flex-start; /* 垂直对齐 */
    margin-bottom: 20px;
  }

  .upload-exam, .upload-video {
    flex: 1; /* 允许子元素占据相同的空间 */
    margin-right: 200px; /* 为并排元素添加右边距 */
  }

    .upload-exam:last-child, .upload-video:last-child {
      margin-right: 0; /* 移除最后一个元素的右边距 */
    }

  .pdf-uploader, .video-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    .pdf-uploader:hover, .video-uploader:hover {
      border-color: #409EFF;
    }

  .upload-instructions {
    text-align: center; /* 确保提示文字居中 */
    margin-top: 5px; /* 添加上边距 */
    font-size: 12px; /* 设置字体大小 */
    color: #999; /* 设置字体颜色 */
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }

  .el-upload__tip {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
  }

  .el-button {
    margin-top: 10px;
  }

  .sub {
    margin-top: 35vh;
    margin-left: -10vw;
  }



  .chatbot {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
  }

    .chatbot img {
      width: 70px;
    }

  .chatbot-text {
    margin-right: 10px; /* 与链接间距 */
  }

  .chatbot-link {
    color: black; /* 设置链接颜色为黑色 */
    text-decoration: underline; /* 添加下划线 */
    font-size: 16px; /* 设置字体大小 */
    transition: color 0.3s; /* 平滑颜色变化 */
  }

    .chatbot-link:hover,
    .chatbot-link:focus,
    .chatbot-link:active {
      color: black; /* 悬停、聚焦、点击时颜色不变 */
      text-decoration: underline; /* 保持下划线 */
    }

  .chatbot-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000; /* 确保弹出框在最上层 */
  }

  .chatbot-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 灰色半透明遮罩 */
    z-index: 999; /* 遮罩层在弹出框下一层 */
  }

  .popup-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }

  .chatbot-popup h2 {
    margin-top: 0; /* 移除标题的上边距 */
  }

  .chatbot-popup textarea {
    width: 100%;
    margin-bottom: 10px;
  }


  .upload-button {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
    transition: border-color 0.3s;
  }

    .upload-button:hover {
      border-color: #409EFF;
    }

  .upload-icon {
    font-size: 2em;
    margin-bottom: 10px;
    color: #409EFF;
  }

  .upload-button p {
    text-align: center;
    margin: 0;
    font-size: 1em;
    color: #333;
  }

  .upload-icon i {
    font-size: 2em;
    margin-bottom: 10px;
    color: #409EFF; /* 正常状态颜色 */
  }

    .upload-icon i.el-icon-check {
      color: #67c23a; /* 成功状态颜色 */
    }

  .error-message {
    color: #ff4949; /* 错误消息的颜色 */
    text-align: center;
    margin-top: 10px;
  }

  .upload-button.is-uploading {
    border-color: #409EFF;
    background-color: rgba(64, 158, 255, 0.1);
  }

  .upload-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
    text-align: center;
  }
</style>
